import React, { useState } from 'react'
import { Input, Row, Col, Button, Space } from 'antd'
import { AlignLeftOutlined } from '@ant-design/icons'
import PopImgShow from '@/components/PopImgShow'
import MangeMask from '../Cephalogram/components/manageMash';
import aliOssUpload from '@/utils/aliOssUpload';
const Picture = (props) => {
    const [visible, setVisible] = useState(false)
    const {
        data = {},
        index,
        selectIndex,
        onChange
    } = props
    const {
        title,
        label,
        require = false,
        desc,
        value = ''
    } = data
    const openImagePicker = async () => {
        try {
            const fileHandle = await window.showOpenFilePicker({
                multiple: false, // 设置为 false 表示只能选择一个文件
                types: [
                    {
                        accept: {
                            'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.tiff', '.svg']
                        }
                    }
                ]
            });
            // 处理文件，例如读取内容
            const file = fileHandle.values().next().value;
            const image = await file.getFile();
            const img = await aliOssUpload(image)
            onChange({
                changeType: 'update',
                data: {
                    ...data,
                    value: img,

                },
                index: index
            })
        } catch (error) {
            console.error(error);
        }
    }
    return <div onClick={(e) => {
    }}>
        <Row style={{ padding: 24, background: "#ffffff" }} gutter={[36, 12]}>
            <Col style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} span={24}>
                <div>{require ? <span style={{ marginRight: 4, color: 'red' }}>*</span> : ''}{index}.{title}</div>
                <div>
                    {selectIndex == index ? <Space>
                        <Button onClick={(e) => {
                            e.stopPropagation()
                            onChange({
                                changeType: 'coby',
                                data: data,
                            })
                        }}>复制</Button>
                        <Button onClick={(e) => {
                            e.stopPropagation()
                            onChange({
                                changeType: 'delete',
                            })
                        }}>删除</Button>
                    </Space> : ''}
                </div>
            </Col>
            <Col span={12} offset={6}>
                <Input onChange={(e) => {
                    onChange({
                        changeType: 'update',
                        data: {
                            ...data,
                            label: e.target.value,

                        },
                        index: index
                    })
                }} value={label} placeholder='请输入题目标题'></Input>
            </Col>
            <Col span={12} offset={6}>
                <Input onChange={(e) => {
                    onChange({
                        changeType: 'update',
                        data: {
                            ...data,
                            desc: e.target.value
                        },
                        index: index
                    })
                }} value={desc} placeholder='请输入题目描述（选填）'></Input>
            </Col>
            <Col span={12} offset={6}>
                <Space>
                    <Button onClick={() => {
                        openImagePicker()
                    }} type='primary'>本地上传</Button>
                    <Button type='link' onClick={() => { setVisible({ show: true }) }} >选择素材</Button>
                </Space>
            </Col>
            <Col span={12} offset={6}>
                <PopImgShow width={100} url={value}></PopImgShow>
            </Col>
        </Row>
        <MangeMask
            handleImage={(e) => {
                setVisible(() => {
                    if (e) {
                        onChange({
                            data: { value: e.src },
                            changeType: 'update',
                            index: selectIndex
                        })
                    }
                    return false;
                });
            }}
            visible={visible}
            onClose={() => setVisible(false)}
        ></MangeMask>
    </div>
}
export default Picture